<template>
    <li class="item">
        <input
            type="checkbox"
            name="segment-side-nav"
            v-model="checkState"
            :id="checkboxId"
            @change="determineCallback"
        />
        <label :for="checkboxId" class="btn">
            <i class="icon" :class="iconName"></i>
            <span class="text">{{ text }}</span>
        </label>
    </li>
</template>

<script>
    export default {
        name: "",
        data() {
            return {
                checkboxId: null,
                checkState: this.defaultState,
            };
        },
        model: {
            prop: "checked",
            event: "change",
        },
        props: {
            defaultState: {
                type: Boolean,
                default: false,
            },
            iconName: {
                type: String,
                default: "",
            },
            text: {
                type: String,
                default: "untitled",
            },
        },
        watch: {
            text: {
                handler(n) {
                    this.checkboxId = "segment-check-" + n;
                },
                immediate: true,
            },
        },
        methods: {
            determineCallback() {
                if (this.checkState === true) {
                    this.$emit("on-checked");
                } else {
                    this.$emit("on-unchecked");
                }
            },
        },
    };
</script>

<style scoped>
</style>